<template>
    <el-dialog v-model="open" title="游戏时间" width="450px">
        <el-form ref="formRef" :model="formData" label-width="70px">
            <el-form-item label="区间">
                <el-time-select style="width: 160px" v-model="formData.value1" start="00:00" step="00:1" end="23:59" />
                <el-time-select style="width: 160px" v-model="formData.value2" start="00:00" step="00:1" end="23:59" />
            </el-form-item>
            <el-form-item label="区间">
                <el-time-select style="width: 160px" v-model="formData.value3" start="00:00" step="00:1" end="23:59" />
                <el-time-select style="width: 160px" v-model="formData.value4" start="00:00" step="00:1" end="23:59" />
            </el-form-item>
            <el-form-item label="区间">
                <el-time-select style="width: 160px" v-model="formData.value5" start="00:00" step="00:1" end="23:59" />
                <el-time-select style="width: 160px" v-model="formData.value6" start="00:00" step="00:1" end="23:59" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" :loading="loading" @click="onSubmit('formData')">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref, defineExpose, defineEmits } from 'vue'
import { setParameterGameTime } from "@/api";
import { ElMessageBox, ElMessage } from "element-plus";
const emit = defineEmits(['loadData', 'cloneLoading12'])
const formRef = ref()
const open = ref(false)
const formData = reactive({
    gameTime: "",
    value1: "",
    value2: "",
    value3: "",
    value4: "",
    value5: "",
    value6: ""

})
const formRules = {
    gameTime: [
        { required: true, message: '请输入游戏时间', trigger: 'change' },
    ],
}
const loading = ref(false)
const onSubmit = async () => {
    try {
        const a = await formRef.value.validate().catch(() => null)
        if (!a) return
        open.value = false;
        formData.gameTime = (reduce(formData.value1) + "," + reduce(formData.value2) + "," + reduce(formData.value3) + "," + reduce(formData.value4) + "," + reduce(formData.value5) + "," + reduce(formData.value6)).split(":").join(',')
        const res = await setParameterGameTime(formData);
        if (res.data.code == 20) {
            ElMessage({
                message: "成功",
                type: "success",
            });
        }
        emit("loadData")
    } catch (error) {
        console.log(error)
    }
}
const repair = (mull) => {
    if (Number(mull) < 10) {
        return "0" + mull
    } else {
        return mull || "00"
    }
}
const reduce = (mull) => {
    const Mull = mull.split(":")
    let str = []
    for (let index = 0; index < Mull.length; index++) {
        const element = Mull[index];
        if (Number(element) < 10) {
            str.push(element.substr(1))
        } else {
            str.push(element)
        }
    }
    return str.join(',')
}
const show = (row) => {
    setTimeout(() => {
        open.value = true;
        formData.value1 = repair(row[0]) + ":" + repair(row[1])
        formData.value2 = repair(row[2]) + ":" + repair(row[3])
        formData.value3 = repair(row[4]) + ":" + repair(row[5])
        formData.value4 = repair(row[6]) + ":" + repair(row[7])
        formData.value5 = repair(row[8]) + ":" + repair(row[9])
        formData.value6 = repair(row[10]) + ":" + repair(row[11])

        emit("cloneLoading12")

    }, 200)
}
defineExpose({
    show,
})
</script>
<style lang="scss" scoped>
.right {
    overflow: auto;
}

.el-form-item {
    display: flex;
}

.el-form {
    &:deep(.el-form-item__content) {
        justify-content: space-between;
    }
}

.el-pagination {
    padding: 15px;
    float: right;
}
</style>